<template>
	<!-- 墨榜组件 -->
	<view class="Mobang">
		<!-- 公告 -->
		<view class="notice">
			<uni-notice-bar show-icon scrollable  showGetMore @getmore="getmore" @click="getmore"
			text="墨运官方活动  前4名将获得墨运奖励!  第一名2000元,第二名1000元,第三名500元,第四名100元" />
			<!-- 跳出弹框 -->
			<uni-popup class="popup" ref="popup" is-mask-click="true" type="center">
				<view class="popupbox">
					<view class="logo">
						<uni-icons type="gift" size="45" color="purple"></uni-icons>
					</view>
					<view class="official">
						墨运官方活动
					</view>
					<view class="info">
						<view class="box1">
							第一名2000元
						</view>
						<view class="box1">
							第二名1000元
						</view>
						<view class="box1">
							第三名500元
						</view>
						<view class="box1">
							第四名100元
						</view>
					</view>
					<!-- <button @click="close">关闭</button> -->
				</view>
			</uni-popup>
			<!-- <Popup></Popup> -->
		</view>
		<!-- 图片 -->
		<view class="Mimage">
			
			<image src="../../common/images/MBang.png" mode="aspectFill"></image>
		</view>
		<!-- 排行榜 -->
		<view class="Bigbox">
			<!-- <view class="box" v-for="item in 4">
				<view class="smallbox">
					<view class="numberbox">
						<view class="number">1</view>
					</view>
					<view class="usrinfo">
						<image class="usrimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdR-ZFzw0mvwBIs6mgkmtNgaztmfrT71ZG8A&s" mode="aspectFill"></image>
						<view class="usrname">爱吃香菜的猫</view>
					</view>
				</view>
			</view> -->
			<!-- 1 -->
			<view class="box " >
				<view class="smallbox">
					<view class="numberbox">
						<view class="number box1">1</view>
					</view>
					<view class="usrinfo">
						<image class="usrimg" src="/common/Otherimages/u4.jpg" mode="aspectFill"></image>
						<view class="usrname">爱吃香菜的猫</view>
					</view>
				</view>
			</view>
			<!-- 2 -->
			<view class="box box2" >
				<view class="smallbox">
					<view class="numberbox ">
						<view class="number box2">2</view>
					</view>
					<view class="usrinfo">
						<image class="usrimg" src="/common/Otherimages/u23.jpg" mode="aspectFill"></image>
						<view class="usrname">带你吃香喝辣滴</view>
					</view>
				</view>
			</view>
			<!-- 3 -->
			<view class="box" >
				<view class="smallbox">
					<view class="numberbox">
						<view class="number box3">3</view>
					</view>
					<view class="usrinfo">
						<image class="usrimg" src="/common/Otherimages/u5.jpg" mode="aspectFill"></image>
						<view class="usrname">淘气小面包</view>
					</view>
				</view>
			</view>
			<!-- 4 -->
			<view class="box box4" >
				<view class="smallbox">
					<view class="numberbox">
						<view class="number box3">4</view>
					</view>
					<view class="usrinfo">
						<image class="usrimg" src="/common/Otherimages/u6.jpg" mode="aspectFill"></image>
						<view class="usrname">小图小图真好</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue"
const popup=ref(null)
// 实现公告栏弹窗显示
const getmore=()=>{
	console.log("被点击了");
	// uni.showToast({
	// 	title:`被点击了`,
	// 	icon:"none"
	// })
	popup.value.open();
	
}
const close=()=>{
	popup.value.close();
}

</script>

<style lang="scss" scoped>
.Mobang{
	.notice{
		padding:10rpx 30rpx 0rpx 30rpx;
		
	}
	.Mimage{
		padding-top: 20rpx;
		padding-left: 50rpx;
		padding-bottom: 70rpx;
		image{
			width: 636rpx;
			height: 300rpx;
			border-radius: 60rpx;
			background: lightgray 50% / cover no-repeat;

			box-shadow: 0px 13px 16.4px 0px rgba(0, 0, 0, 0.25);
		}
	}
	.Bigbox{
		padding-left:50rpx;
		display: grid;
		grid-template-rows: repeat(4,1fr);
		gap: 55rpx;
		.box{
			width: 634rpx;
			height: 142rpx;
			background: #FFE7E7;
		
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			
			.smallbox{
				display: grid;
				grid-template-columns: 10% auto;
				gap:80rpx;
				padding-left:50rpx;
				padding-top: 40rpx;
				.numberbox{
					padding:10rpx 0rpx;
					.number{
						width: 48rpx;
						height: 46rpx;
						border-radius: 20rpx;
						background: rgba(255, 229, 0, 0.72);
						box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding-left:2rpx;
						padding-right:2rpx;
						// gap: 10px;
					
					}
				}
				
				
				.usrinfo{
					
					display: grid;
					grid-template-columns: 20% auto;
					gap:30rpx;
				
					// border:1rpx solid #000;						
					.usrimg{
						width:74rpx;
						height:74rpx;
						border-radius: 50%;
					}
					.usrname{
						color: #000;
						font-family: Inter;
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
					}
				}
				
			}
		}
		
	}
	
}
.Bigbox .box .smallbox .number {
  /* 默认的 .number 背景颜色 */
  background: rgba(255, 229, 0, 0.72);

  &.box2 {
    background: rgba(232, 233, 200, 0.72);
  }

  &.box3 {
    background:  rgba(255, 122, 0, 0.52);
  }

  &.box4 {
    background: rgba(0, 117, 255, 0.35);
  }
}
// 弹出框样式
.popup{
	.popupbox{
		position: relative;
		width: 478rpx;
		height: 718rpx;
		border-radius: 33px;

		background: linear-gradient(180deg, rgba(255, 138, 0, 0.62) 0%, rgba(104, 153, 0, 0.72) 100%);
		box-shadow: -6px 4px 9.8px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 10px 11px 10.3px 0px rgba(255, 255, 255, 0.25) inset;
		// background:white;
		background: linear-gradient(180deg, #FF8A00 0%, #689900 100%);
		box-shadow: -6px 4px 9.8px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 10px 11px 10.3px 0px rgba(255, 255, 255, 0.25) inset;
	

		.logo{
			position: absolute;
			top:100rpx;
			left:200rpx;
		}
		.official{
			position: absolute;
			top:200rpx;
			left:148rpx;
		}
		.info{
			white-space: pre-line;
			position: absolute;
			top: 300rpx;
			left:170rpx;
			color: #000;
			font-family: Inter;
			font-size: 26rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			padding-bottom: 60rpx;
			border-bottom:1rpx solid pink;
			.box1{
				padding-bottom: 30rpx;
			}
		}
	}
}

</style>